<script setup lang="ts">
  import { useClearUserInfo } from '@/hooks/user'
  import { formValidate, msg, showModal } from '@/utils/tools'
  import { SET_USER_INFO } from '@/store/types'
  import { useStore } from 'vuex'
  import { inject, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  const $Prefix = inject('$Prefix')
  import { getUserInfo, postUserUpdateInfo } from '@/api/user'
  const store = useStore()

  const userInfo = ref({
    nickName: '',
    avatarUrl: '',
    username: '',
    sex: '',
  })
  onLoad(() => {
    getUserInfo().then(res => {
      if(res.code == 200){
        userInfo.value = res.data
      }
    })
  })
  const loginOut = () => {
    showModal({
      content:'您确定要退出登录吗？',
      confirmText:'退出',
      success:(res) => {
        if(res.confirm){
          useClearUserInfo()
          msg('退出成功')
          uni.switchTab({url:'/pages/index/index'})
        }
      }
    })
  }
  // 头像选择
  const onChooseAvatar = (data:any) => {
    uploadFilePromise(data.detail.avatarUrl).then(res => {
      const _res = JSON.parse(res as string)
      if (_res.code == 200){
        userInfo.value.avatarUrl = _res.data.fullUrl
      }
    })
  }
  const uploadFilePromise = (url:any) => {
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        url: $Prefix+'/api/mobile/file/public/upload', // 仅为示例，非真实的接口地址
        filePath: url,
        name: 'file',
        success: (res:any) => {
          if(res.statusCode == 200){
            setTimeout(() => {
              resolve(res.data);
            }, 1000);
          }else{
            setTimeout(() => {
              resolve(false);
            }, 1000);
            msg('上传失败,请重新上传')
          }

        },
      });
    });
  }

  const userInfoRule = {
    mobile:{message:'请输入手机号',patternType:'phone'},
  }
  const submitUserInfo = async () => {
    await formValidate(userInfo.value, userInfoRule)
    postUserUpdateInfo(userInfo.value).then(res => {
      const userInfos = JSON.parse(JSON.stringify(store.state.user.userInfo))
      userInfos.avatarUrl = userInfo.value.avatarUrl
      userInfos.nickName = userInfo.value.nickName
      userInfos.username = userInfo.value.username
      uni.setStorageSync('userInfo', userInfos)
      store.commit(`user/${SET_USER_INFO}`, userInfos)
      uni.navigateBack()
    })

  }
</script>

<template>
  <view class="mine-setting">
    <xx-title title="账号设置"/>
    <view class="mine-header">
      <view class="header-image">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image v-if='userInfo.avatarUrl' :src="userInfo.avatarUrl"/>
          <up-icon v-else name="camera" size="28"></up-icon>
        </button>
      </view>
    </view>
    <view class="mine-body">
      <view class="mine-item">
        <view class="item-label">性别</view>
        <view class="item-value">
          <input v-model='userInfo.sex' readonly disabled type="text"/>
        </view>
      </view>
      <view class="mine-item">
        <view class="item-label">昵称</view>
        <view class="item-value">
          <input v-model='userInfo.nickName' placeholder='请输入昵称' type="text"/>
        </view>
      </view>
      <view class="mine-item">
        <view class="item-label">姓名</view>
        <view class="item-value">
          <input v-model='userInfo.username' placeholder='请输入姓名' type="text"/>
        </view>
      </view>
<!--      -->
<!--      <view class="mine-item">-->
<!--        <view class="item-label">绑定手机号</view>-->
<!--        <view class="item-value">-->
<!--          <input v-model='userInfo.mobile' type="text"/>-->
<!--        </view>-->
<!--      </view>-->
    </view>
    <view class="mine-btn" @click="submitUserInfo">
      保存信息
    </view>
    <!--    <view class="mine-body">-->
    <!--      <view class="mine-item" @click="loginOut">-->
    <!--        <view class="item-label" style="color:#D8232A;font-weight: bold">退出登录</view>-->
    <!--        <view class="item-value">-->
    <!--          <view class="right">-->
    <!--            <up-icon name="arrow-right" size="14" color="#D8232A"></up-icon>-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
  </view>
</template>

<style scoped lang="scss">
.mine-setting{
  width: 100%;
  background-color: #F5F5F5;
  min-height: 100vh;
  padding-top: 1rpx;
  box-sizing: border-box;
  .mine-header{
    width: 240rpx;
    height: 240rpx;
    border-radius: 500rpx;
    background-color: #FFFFFF;
    margin: 48rpx auto;
    overflow: hidden;
    .header-image{
      width: 100%;
      height: 100%;
      .avatar-wrapper{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .mine-body{
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 0 32rpx;
    margin: 32rpx;
    .mine-item{
      padding: 24rpx 0;
      display: flex;
      align-items: flex-start;
      border-bottom: 1px solid #F5F5F5;
      .item-label{
        color: #505363;
        font-size: 28rpx;
        width: 160rpx;
        font-weight: 500;
      }
      .item-value{
        width: calc(100% - 160rpx);
        font-size: 28rpx;
        color: #21252E;
        font-weight: 500;
        text-align: right;
        .right{
          display: inline-block;
        }
        .picker-value{
          background: #FFFFFF;
          border-radius: 10rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .picker-text{
            width: calc(100% - 24rpx);
            font-size: 28rpx;
          }
          &.placeholder{
            color: #a6a6a6;
          }
        }
      }
    }
  }
  .mine-btn{
    background: #92C75B;
    color: #FFFFFF;
    border-radius: 16rpx;
    width: calc(100% - 64rpx);
    margin: 0 32rpx;
    padding: 16rpx 0;
    letter-spacing: 2rpx;
    font-weight: 500;
    text-align: center;
  }
}
</style>
